<template>
 <div class="container">
     <!-- <div class="card-search">
        <el-form size="small" :inline="true" label-width="80px" :model="form" class="demo-form-inline">
        <el-form-item style="height:30px;" label=" ">
            <el-select filterable  clearable v-model="form.specification" placeholder="请选择">
                <el-option v-for="(item, index) in specifications" :key="index" :label="item" :value="item"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="直径规格">
            <el-select filterable  clearable v-model="form.diameter" placeholder="请选择">
                <el-option v-for="(item, index) in diameters" :key="index" :label="item" :value="item"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="float:right;" label=" ">
            <el-button  icon="el-icon-search" type="primary" @click="getAllData()">查询</el-button>
            <el-button  icon="el-icon-refresh" type="primary" plain @click="refresh()">重置</el-button>
            <el-button  icon="el-icon-plus" type="primary" @click="$router.push({name:'CORedit'})">新增</el-button>
        </el-form-item>
        </el-form>
     </div> -->
     <div class="card-table">
        <el-button style="margin-bottom:12px;" icon="el-icon-plus" type="primary" @click="$router.push({name:'crucibleMachine/edit'})">新增</el-button>
        <el-table
          :cell-style="{padding:0,'padding-left':0,'padding-right':0}"
          :header-cell-style="getRowClass"
          :data="tableData"
          style="width: 100%">
            <el-table-column
                align="center"
                label="工单编号"
                fixed
                width="150">
                <template slot-scope="{row}">
                  {{row.code}}
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="目标客户"
                prop="targetCustomer"
                width="">
            </el-table-column>
            <el-table-column
                align="center"
                prop="principal"
                label="负责人"
                width="">
            </el-table-column>
            <el-table-column
                align="center"
                prop="inputPeople"
                label="填写人"
                width="">
            </el-table-column>
            <el-table-column
                align="center"
                label="机加工开始时间"
                width="">
                <template slot-scope="{row}">
                  {{row.produceStartTime.slice(0,-3)}}
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="机加工结束时间"
                width="">
                <template slot-scope="{row}">
                  {{row.produceEndTime.slice(0,-3)}}
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="{row}">
                <div>
                  <el-tag size="medium" v-if="!row.isMachining" type="warning">待完成</el-tag>
                  <el-tag size="medium" v-else type="success">已完成</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="操作"
                width="250">
                <template slot-scope="{row}">
                  <div style="padding:12px;">
                    <el-button class="operateBtn" v-if="!row.isMachining" @click="dialogFormVisible=true,selectRow=row" icon="el-icon-finished" type="text">完成</el-button>
                    <el-button class="detailBtn" v-else icon="el-icon-tickets" type="text" @click="detail(row)">详情</el-button>
                    <el-button class="operateBtn" :disabled="!row.editable" @click="edit(row)" icon="el-icon-edit-outline" type="text">编辑</el-button>
                    <el-button class="operateBtn" :disabled="!row.editable" icon="el-icon-delete" @click="deleteOne(row._id)" type="text">删除</el-button>
                  </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagin" v-if="total>0">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <el-dialog title="机加工完成信息" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
          <el-form ref="outStoveForm" :rules="rules" label-width="120px" :model="outStoveForm">
            <el-form-item label="机加工结束时间" prop="produceEndTime">
              <el-date-picker
                style="width:300px;"
                v-model="outStoveForm.produceEndTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="outStove('outStoveForm')">确 定</el-button>
          </div>
        </el-dialog>
     </div>
 </div>
</template>

<script>
import { crucibleMachiningGet, getCrucibleFormConditions, crucibleMachiningDelete, crucibleMachiningUpdate } from '@/api/crucible.js'
import { nomalPages } from '@/mixin'
export default {
  name: 'test',
  components: {},
  data () {
    return {
      showDetail: '', // 选中展开的详情
      selectRow: {},
      pageSize: 10,
      currentPage: 1,
      total: 1,
      form: {},
      outStoveForm: {},
      tableData: [
      ],
      row: '',
      dialogFormVisible: false,
      specifications: [],
      diameters: [],
      rules: {
        outStoveMan: [
          { required: true, message: '请输入负责人', trigger: 'change' }
        ],
        produceEndTime: [
          { required: true, message: '请输入完成事件', trigger: 'change' }
        ]
      }
    }
  },
  mixins: [nomalPages],
  computed: {},
  watch: {},
  created () {},
  mounted () {
    getCrucibleFormConditions().then(res => {
      this.diameters = res.data.data.diameter
      this.specifications = res.data.data.specification
    })
  },
  methods: {
    clickDetail (row) {
      if (this.showDetail !== row._id) {
        this.showDetail = row._id
      } else {
        this.showDetail = ''
      }
    },
    outStove (formName) {
      const Row = JSON.parse(JSON.stringify(this.selectRow))
      const dateNow = new Date()
      var year = dateNow.getFullYear()
      var month = dateNow.getMonth() + 1 // js从0开始取
      var date1 = dateNow.getDate()
      var hour = dateNow.getHours()
      var minutes = dateNow.getMinutes()
      var second = dateNow.getSeconds()
      const payload = {
        ...Row,
        workOrderEndTime: year + '-' + month + '-' + date1 + ' ' + hour + ':' + minutes + ':' + second,
        isMachining: true,
        produceEndTime: this.outStoveForm.produceEndTime,
        crucibleFirstRoastId: Row.crucibleFirstRoast._id
      }
      crucibleMachiningUpdate(payload).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '机加工完成',
            type: 'success'
          })
          this.$refs[formName].resetFields()
          this.dialogFormVisible = false
          this.getAllData()
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    edit (row) {
      // console.log(row)
      const json = JSON.stringify(row)
      this.$router.push({
        name: 'crucibleMachine/edit',
        query: {
          row: json
        }
      })
    },
    detail (row) {
      const json = JSON.stringify(row)
      this.$router.push({
        name: 'crucibleMachine/detial',
        query: {
          row: json
        }
      })
    },
    deleteOne (_id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crucibleMachiningDelete(_id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAllData()
          } else {
            this.$message({
              type: 'warging',
              message: res.data.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getAllData () {
      const params = {
        ...this.form,
        pageSize: this.pageSize,
        currPage: this.currentPage
      }
      crucibleMachiningGet(params).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.tableData = res.data.data.pageData
          this.total = res.data.data.total
        }
      })
    }
  }
}
</script>

<style  scoped>
.cellTable{
  height: 26px;
  border-bottom: thin solid rgb(232, 237, 241);
  color: #999;
}
.cell{
  padding: 0;
}
.operateBtn {
  color: $primary;
  padding: 8px;
  font-size: 12px !important;
  margin: 0 !important;
  &:hover{
    color:rgb(141, 142, 197) ;
  }
}
.detailBtn {
  color: $warning;
  padding: 8px;
  font-size: 12px !important;
  margin: 0 !important;
  &:hover{
    color:rgb(223, 197, 112) ;
  }
}
.showDetail{
  cursor: pointer;
  transition: transform 0.3s;
  &:hover {
    color: $primary;
  }
  &-icon{
    transform:rotate(180deg);
  }
}
 .el-dialog__header{
    border-bottom: thin solid rgb(229, 229, 236);
}
.pagin{
  display: flex;
  justify-content: right;
  padding: 12px 12px 0 0;
}
.pagin  .el-pager .active{
  background-color: $primary !important;
}
</style>
